<template>
	<view class="page">
		<!-- 用户信息 -->
		<view class="user-info">
			<image src="/static/svg/avatar-male.svg" class="avatar" />
			<view class="user-detail">
				<text class="username">小明同学</text>
				<view class="privacy-setting" @click="showPrivacyPicker">
					<text class="privacy-text">{{ privacyOptions[selectedPrivacy].name }}</text>
					<image src="/static/svg/dropdown.svg" class="dropdown-icon" />
				</view>
			</view>
		</view>

		<!-- 内容编辑区 -->
		<view class="content-section">
			<textarea v-model="momentData.content" placeholder="分享此刻的心情..." class="content-input" auto-height />

			<!-- 图片网格 -->
			<view class="image-grid" v-if="momentData.images.length > 0">
				<view 
					class="image-item" 
					v-for="(image, index) in momentData.images" 
					:key="index"
					@click="previewImage(index)"
				>
					<image :src="image" class="grid-image" mode="aspectFill" />
					<view class="delete-btn" @click.stop="removeImage(index)">
						<text class="delete-icon">×</text>
					</view>
				</view>
				<view class="add-image-btn" @click="chooseImages" v-if="momentData.images.length < 9">
					<image src="/static/svg/add.svg" class="add-icon" />
				</view>
			</view>

			<!-- 添加图片按钮 -->
			<view class="add-image-empty" @click="chooseImages" v-if="momentData.images.length === 0">
				<image src="/static/svg/camera.svg" class="camera-icon" />
				<text class="add-text">添加图片</text>
			</view>
		</view>

		<!-- 功能操作区 -->
		<view class="action-section">
			<view class="action-item" @click="addTopic">
				<image src="/static/svg/comprehensive.svg" class="action-icon" />
				<text class="action-text">添加话题</text>
			</view>
			<view class="action-item" @click="addLocation">
				<image src="/static/svg/landscape.svg" class="action-icon" />
				<text class="action-text">添加位置</text>
			</view>
			<view class="action-item" @click="chooseImages">
				<image src="/static/svg/camera.svg" class="action-icon" />
				<text class="action-text">拍照/选择图片</text>
			</view>
		</view>

		<!-- 已添加的话题 -->
		<view class="topic-list" v-if="momentData.topics.length > 0">
			<view class="topic-item" v-for="(topic, index) in momentData.topics" :key="index">
				<text class="topic-text">#{{ topic }}</text>
				<view class="topic-delete" @click="removeTopic(index)">
					<text class="delete-icon">×</text>
				</view>
			</view>
		</view>

		<!-- 位置信息 -->
		<view class="location-info" v-if="momentData.location">
			<image src="/static/svg/landscape.svg" class="location-icon" />
			<text class="location-text">{{ momentData.location }}</text>
			<view class="location-delete" @click="removeLocation">
				<text class="delete-icon">×</text>
			</view>
		</view>

		<!-- 高级设置 -->
		<view class="advanced-settings">
			<view class="setting-item">
				<text class="setting-label">允许评论</text>
				<switch :checked="momentData.allowComment" @change="onAllowCommentChange" color="#667eea" />
			</view>
			<view class="setting-item">
				<text class="setting-label">同步到其他平台</text>
				<switch :checked="momentData.syncOther" @change="onSyncOtherChange" color="#667eea" />
			</view>
		</view>

		<!-- 底部发布按钮 -->
		<view class="publish-footer">
			<button class="draft-btn" @click="saveDraft">保存草稿</button>
			<button class="publish-btn" @click="publishMoment" :disabled="!canPublish">发布动态</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 动态数据
const momentData = reactive({
	content: '',
	images: [],
	topics: [],
	location: '',
	allowComment: true,
	syncOther: false,
	privacy: 0 // 0: 公开, 1: 仅好友, 2: 私密
})

// 隐私设置选项
const privacyOptions = ref([
	{ id: 0, name: '公开', icon: '🌍' },
	{ id: 1, name: '仅好友', icon: '👥' },
	{ id: 2, name: '私密', icon: '🔒' }
])

const selectedPrivacy = ref(0)

// 是否可以发布
const canPublish = computed(() => {
	return momentData.content.trim().length > 0 || momentData.images.length > 0
})

// 显示隐私设置选择器
const showPrivacyPicker = () => {
	const itemList = privacyOptions.value.map(item => `${item.icon} ${item.name}`)
	uni.showActionSheet({
		itemList,
		success: (res) => {
			selectedPrivacy.value = res.tapIndex
			momentData.privacy = res.tapIndex
		}
	})
}

// 选择图片
const chooseImages = () => {
	const remainCount = 9 - momentData.images.length
	uni.chooseImage({
		count: remainCount,
		sizeType: ['compressed'],
		sourceType: ['camera', 'album'],
		success: (res) => {
			momentData.images.push(...res.tempFilePaths)
		}
	})
}

// 预览图片
const previewImage = (index) => {
	uni.previewImage({
		urls: momentData.images,
		current: index
	})
}

// 删除图片
const removeImage = (index) => {
	momentData.images.splice(index, 1)
}

// 添加话题
const addTopic = () => {
	uni.showModal({
		title: '添加话题',
		placeholderText: '请输入话题关键词',
		editable: true,
		success: (res) => {
			if (res.confirm && res.content) {
				const topic = res.content.trim()
				if (topic && !momentData.topics.includes(topic)) {
					momentData.topics.push(topic)
				}
			}
		}
	})
}

// 删除话题
const removeTopic = (index) => {
	momentData.topics.splice(index, 1)
}

// 添加位置
const addLocation = () => {
	uni.chooseLocation({
		success: (res) => {
			momentData.location = res.name || res.address
		}
	})
}

// 删除位置
const removeLocation = () => {
	momentData.location = ''
}

// 保存草稿
const saveDraft = () => {
	uni.showLoading({ title: '保存中...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({ title: '草稿已保存', icon: 'success' })
	}, 1000)
}

// switch组件变化处理
const onAllowCommentChange = (e) => {
	momentData.allowComment = e.detail.value
}

const onSyncOtherChange = (e) => {
	momentData.syncOther = e.detail.value
}

// 发布动态
const publishMoment = () => {
	if (!canPublish.value) {
		uni.showToast({ title: '请输入内容或添加图片', icon: 'none' })
		return
	}

	uni.showLoading({ title: '发布中...' })
	// 模拟发布操作
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({ 
			title: '发布成功', 
			icon: 'success',
			success: () => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}, 2000)
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 100px;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 20px;
	background: white;
	margin-bottom: 10px;
}

.avatar {
	width: 48px;
	height: 48px;
	border-radius: 24px;
	margin-right: 15px;
	background: #f0f0f0;
	padding: 6px;
}

.user-detail {
	flex: 1;
}

.username {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.privacy-setting {
	display: flex;
	align-items: center;
}

.privacy-text {
	font-size: 14px;
	color: #666;
	margin-right: 5px;
}

.dropdown-icon {
	width: 12px;
	height: 12px;
	transform: rotate(90deg);
	filter: opacity(0.5);
}

.content-section {
	background: white;
	padding: 20px;
	margin-bottom: 10px;
}

.content-input {
	width: 100%;
	min-height: 120px;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	border: none;
	background: transparent;
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.image-item {
	position: relative;
	width: calc(33.33% - 6px);
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
}

.grid-image {
	width: 100%;
	height: 100%;
}

.delete-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-icon {
	color: white;
	font-size: 16px;
	font-weight: bold;
}

.add-image-btn {
	width: calc(33.33% - 6px);
	height: 100px;
	border: 2px dashed #ddd;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
}

.add-icon {
	width: 24px;
	height: 24px;
	filter: opacity(0.5);
}

.add-image-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 120px;
	border: 2px dashed #ddd;
	border-radius: 12px;
	background: #fafafa;
	margin-top: 15px;
}

.camera-icon {
	width: 32px;
	height: 32px;
	filter: opacity(0.5);
	margin-bottom: 8px;
}

.add-text {
	color: #999;
	font-size: 14px;
}

.action-section {
	background: white;
	padding: 15px 20px;
	margin-bottom: 10px;
}

.action-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.action-item:last-child {
	border-bottom: none;
}

.action-icon {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	filter: opacity(0.7);
}

.action-text {
	font-size: 16px;
	color: #333;
}

.topic-list {
	background: white;
	padding: 15px 20px;
	margin-bottom: 10px;
}

.topic-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 20px;
	margin-bottom: 8px;
}

.topic-item:last-child {
	margin-bottom: 0;
}

.topic-text {
	color: #667eea;
	font-size: 14px;
	font-weight: 500;
}

.topic-delete {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.location-info {
	display: flex;
	align-items: center;
	background: white;
	padding: 15px 20px;
	margin-bottom: 10px;
}

.location-icon {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	filter: opacity(0.7);
}

.location-text {
	flex: 1;
	font-size: 14px;
	color: #666;
}

.location-delete {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.advanced-settings {
	background: white;
	padding: 15px 20px;
	margin-bottom: 10px;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-label {
	font-size: 16px;
	color: #333;
}

.publish-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 15px 20px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	gap: 15px;
}

.draft-btn {
	flex: 1;
	height: 44px;
	border: 1px solid #e5e5e5;
	border-radius: 22px;
	background: white;
	color: #666;
	font-size: 16px;
}

.publish-btn {
	flex: 2;
	height: 44px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 22px;
	color: white;
	font-size: 16px;
	font-weight: 600;
}

.publish-btn:disabled {
	background: #ddd;
	color: #999;
}
</style> 